<template>
  <el-button type="primary" @click="add">新增类别</el-button>
  <el-table :data="typeList" style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="类型名称" />
    <el-table-column label="操作" prop="action">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from "vue";
import Enums from "@/utils/Enums";
import { auditArticle, getAuditList } from "@/api/admin";
import { ElMessage, ElMessageBox } from "element-plus";
import { addType, deleteType, getTypeList } from "@/api/types";

const typeList = ref([]);

const getList = async () => {
  getTypeList().then((res) => {
    typeList.value = res.data.data;
  });
};

const add = async () => {
  ElMessageBox.prompt("请输入类别名称", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showInput: true,
    // 非空
    inputValidator: (value) => {
      if (!value) {
        return "类别名称不能为空";
      }
      return true;
    },
  })
    .then(async ({ value }) => {
      await addType({ typeName: value });
      ElMessage.success("添加成功！");
      getList();
    })
    .catch(() => {});
};

const del = async (id) => {
  ElMessageBox.confirm(
    `是否删除该文章？删除后所有该类别下的文章类别将被清空`,
    "提示",
    {
      type: "warning",
      showCancelButton: true,
      confirmButtonText: "确定",
    }
  )
    .then(async () => {
      await deleteType(id);
      ElMessage.success("删除成功！");
      getList();
    })
    .catch((e) => {
      console.log(e);
    });
};
getList();
</script>
